<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历网页</title>


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-weight: bold;
            list-style: none;
            text-decoration: none;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .con {
            background-image: url(./4780afe0d577ffcbad02f3144a2b77dd.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            margin: 0 auto;
            width: 60%;
            box-shadow: 0 0 5px rgb(0, 0, 0);
            display: flex;
            flex-direction: column;
            align-items: center;
            color: antiquewhite;
        }
        header,
        footer {
            width: 100%;
            color: white;
            background-color: rgb(225, 241, 201,0.5);
            font-size: 40px;
            text-align: center;
        }
        

        .con .item1 img {
            border-radius: 50%;
        }
        .ball:hover{
            animation: ball 60s infinite;
            animation-timing-function: linear;
        }

        .item1 {
            font-size: 20px;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .item1>div {
            width: 50%;
        }

        .item2 {
            font-size: 25px;
        }
        .item2 a:hover {
            color: red;
        }
        .item2 a:active {
            background-color: red;
        }

        table tr td {
            border: 2px solid blue;
        }

        @keyframes ball {
            from {
                transform: rotateZ(0deg);
            }

            25% {
                transform: rotateZ(90deg);
            }

            50% {
                transform: rotateZ(180deg);
            }

            75% {
                transform: rotateZ(270deg);
            }

            to {
                transform: rotateZ(360deg);
            }
        }
        @media screen and (max-width:600px){
            .con{
                margin: 0 auto;
                width: 400px;
            }
        }
    </style>

</head>

<body>
    <div class="con">
        <header>个人简历</header>
        <div class="item1">
            <div class="ball">
                <img src="./bird.jpg" alt="头像" width="auto" height="200px" name="微信toux">
            </div>
            <div>
                <ul>
                    <li>姓名:罗乐</li>
                    <li>性别：男</li>
                    <li>手机：185****0345</li>
                    <li>邮箱：305*******@qq.com</li>
                    <li>出生地：广西</li>
                </ul>
            </div>
        </div>
        <div class="item2">
            <ul>
                <h2>教育经历</h2>
                <li>2023年毕业于江门市新会华侨中学</li>
                <li>2023-2026就读于顺德职业技术学院</li>
            </ul>
            <ul>
                <h2>gitee主页链接</h2>
                <li>
                    <a href="https://gitee.com/ale2300298/basil/tree/master/jianli">
                        https://gitee.com/ale2300298/<br>basil/tree/master/jianli</a>
                </li>
            </ul>
            <ul>
                <h2>大学成绩表：</h2>
                <table cellspacing="0">
                    <tr>
                        <td>科目</td>
                        <td>成绩</td>
                    </tr>
                    <tr>
                        <td>创新创业基础</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>职业生涯规划</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>军事（含《军事理论》与《军事技能》）</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>思想道德与法治</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>体育(1)</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>大学生心理健康教育</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>应用数学与数学文化</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>高职英语（1）</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>信息技术基础</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>大学国文</td>
                        <td>B</td>
                    </tr>
                </table>
            </ul>
            <h2>项目经验</h2>
            <ul>
                <li>会使用git传输，合作开发</li>
                <li>认识html,css，js相关知识</li>
                <li>能够独立制作简单网页</li>
            </ul>
            <h2>个人自述</h2>
            <ul>
                <li>本人为程序小白,目前在学web制作</li>
                <li>对编程比较有兴趣</li>
                <li>喜欢上网冲浪</li>
            </ul>
            <h2>成长瞬间</h2>
            <ul>
                <h3>兴趣爱好：</h3>
                <li>
                    绘画
                </li>
                <img src="./屏幕截图 2024-03-26 170727.png" alt="">
                <li>
                    游戏
                </li>
                <img src="./屏幕截图 2024-03-26 170903.png" alt="" width="300px">
                <li>运动</li>
                <img src="./OIP-C.jpg" alt="" width="300px">
                <li>听音乐，编程，动漫，美食</li>
            </ul>
        </div>
        <footer>背景图为顺职院的一角</footer>
</body>

</html>